@extends('Admin.layouts.common')

@section('content')
    <div class="container myContainer">

        @if(count($errors))
            <div class="alert alert-danger">
                <ul>
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="section_body">
            <div id="wrapper">
                <div id="container">
                    <!--头部，相册选择和格式选择-->
                    <div id="uploader">
                        <div class="queueList">
                            <div id="dndArea" class="placeholder">
                                <div id="filePicker"></div>
                                <p>上传图片</p>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none;">
                            <div class="progress">
                                <span class="text">0%</span>
                                <span class="percentage"></span>
                            </div><div class="info"></div>
                            <div class="btns">
                                <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <em style="display:none" id="upload_button">上传</em>
        </div>

        <form id="defaultForm" method="post" method="post">
            {{ csrf_field() }}
            <div class="form-group">
                <label class="control-label">IMG</label>
                @foreach($data->img as $img)
                    <span style="position: relative;">
                    <img style="max-width: 10%" src="{{img($img)}}">
                    <span style="position: absolute;right: 5px;top: -50px" class="glyphicon glyphicon-remove" aria-hidden="true" onclick="delete_thumb({{$data->id}},'{{img($img)}}',this)"></span>
                    </span>
                @endforeach
                
            </div>
            <div class="form-group required">
                <label class="control-label">缩略图</label>
                <div id="thumb_fileList" class="uploader-list"></div>
                <div id="thumb_filePicker">选择图片</div>
                <div id="thumb_prev">@if(!empty($data->thumb_img))<img style="max-width: 300px" src="{{img($data->thumb_img)}}">@endif</idv>
            </div>
            <div class="form-group required">
                <label class="control-label">分类</label>
                <select class="form-control" name="cat_id">
                    <option value="">请选择分类</option>
                    @foreach($cat as $c)
                        <option value="{{ $c->id}}" <?php if($data->cat_id==$c->id):?>selected=""<?php endif;?>><?=str_repeat("&nbsp;",$c->level*4)?>{{ $c->cat_name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group required">
                <label class="control-label">商品名称</label>
                <input name="title" type="text" class="form-control" value="{{ old('title') ? old('title') : $data->title }}">
            </div>
            
            <?=$html;?>
            <div class="form-group required">
                <label class="control-label">简介</label>
                <textarea class="form-control" name="summary">{{$data->summary}}</textarea>
            </div>
            <div class="form-group required">
                <label class="control-label">价格</label>
                <input name="price" type="text" class="form-control" value="{{ old('price') ? old('price') : $data->price }}">
            </div>

            <div class="form-group required">
                <label class="control-label">库存</label>
                <input name="stock" type="text" class="form-control" value="{{ old('stock') ? old('stock') : $data->stock }}">
            </div>
            <div class="form-group required">
                <label class="control-label">排序</label>
                <input name="pos" type="text" class="form-control" value="{{ old('pos') ? old('pos') : $data->pos }}">
            </div>
            <div class="form-group required">
                <label class="control-label">规格</label>
                <textarea class="form-control" name="specifications">{{ old('specifications') ? old('pspecificationsos') : $data->specifications }}</textarea>
            </div>
            
            <div class="clearfix"></div>
            <div class="form-group required">
                <label class="control-label">内容</label>
                <div id="test-editormd">
                <textarea  style="display:none;" id="content" name="content" rows="5" class="form-control" required>{{ old('content') ? old('content') : $data->content }}</textarea></div>
                <a href="/libs/editormd/examples/index.html" target="_blank">编辑器演示</a>
            </div>
            
            
            <div class="form-group">
                <input id="goods_img" type="hidden" name="img" value="" />
                <input type="hidden" name="thumb_img" value="" />
                <input type="hidden" name="id" value="{{ $data->id }}">
                <button class="btn btn-primary btn-block" type="submit">编辑</button>
            </div>
        </form>
    </div>
@endsection


@section('foot')
    <?php /*?>
    <link rel="stylesheet" href="/libs/editormd/css/editormd.css?v=<?=config('version')?>" />
    <script src="/libs/editormd/editormd.min.js?v=<?=config('version')?>"></script>
        <script type="text/javascript">
            var testEditor;

            $(function() {
                testEditor = editormd("test-editormd", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "/libs/editormd/lib/",
                    markdown : "",
                    //上传图片相关配置如下
                    imageUpload : true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    //imageUploadURL : "{{ env('APP_URL') }}/upload/uploadmd",//注意你后端的上传图片服务地址
                    imageUploadURL : "/upload/uploadmd",
                });
            });
        </script>
    <?php */?>


    <!--
    <script src="{{ asset('libs/ckeditor/ckeditor.js') }}"></script>
    <script>var editor = CKEDITOR.replace('content');</script>
    -->
    <script src="{{ asset('libs/ckeditor5/ckeditor.js') }}?v=<?=config('version')?>"></script>
    <script type="text/javascript">
    var myEditor = null;
    window.onload = function(){
        ClassicEditor.create(document.querySelector("#content"),{
           
       ckfinder: {
           uploadUrl: "/upload/uploadck5"
       },
       height: 800
         }).then(editor => {
        myEditor = editor;
    }).catch(error => {
        console.error(error);
    });
}
    </script>

    <script type="text/javascript" src="/libs/webupload/dist/webuploader.js?v=<?=config('version')?>"></script>
    <script type="text/javascript" src="/libs/webupload/upload.js?v=<?=config('version')?>"></script>
    <link rel="stylesheet" type="text/css" href="/libs/webupload/style.css?v=<?=config('version')?>" />
    <link rel="stylesheet" type="text/css" href="/libs/webupload/css/webuploader.css?v=<?=config('version')?>" />
    
    <script type="text/javascript">
        function jia(obj){
            var html = $(obj).parent().html();
            html = '<div class="attr">'+html+'</div>';
            $(obj).parent().parent().append(html);
            $(obj).parent().parent().find("input[name='val[]']:last").val('');
            $(obj).parent().parent().find("input[name='ids[]']:last").val('');
        }
        function jian(obj){
            $(obj).parent().remove();
        }
    </script>

<style type="text/css">
div.attr input{margin-bottom: 5px;}
div.attr span{ padding: 5px; margin-left: 10px; display: inline-block; width: :20px; height: 20px; cursor: pointer;}
.ck-editor__editable { min-height: 500px; }
</style>

<script src="{{ asset('libs/bootstrapvalidator-master/dist/js/bootstrapValidator.min.js') }}?v=<?=config('version')?>"></script>
<link href="{{ asset('libs/bootstrapvalidator-master/dist/css/bootstrapValidator.min.css') }}?v=<?=config('version')?>" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        excluded:[":disabled"],
        fields: {
            title: {
                validators: {
                    notEmpty: {},
                }
            },
            price: {
                validators: {
                    notEmpty: {},
                },
                regexp:{
                    regexp: /^[0-9]{1}\d*(.\d{1,2})?$/,
                    message: '请填写正确价格'
                }
            },
            stock:{
                validators: {
                    notEmpty: {},
                }
            },
            pos:{
                validators: {
                    notEmpty: {},
                }
            },
            /*
            img:{
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '请上传产品的缩略图'
                    },

                }
            }
            */
        }
    });
});


$.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})

function delete_thumb(id,img,obj){
    if(confirm("确定要删除这个图片吗")){
        $.post("/product/ajax_delete_thumb",{id:id,img:img},function(json){
            if(json.status==1){
                $(obj).parent("span").remove();
                $("input[name='img']").val(json.img);
            }else{
                alert("errro");
            }
            
        },"json");
    }
}

var up_thumb = WebUploader.create({
    auto: true,
    swf: '/libs/webupload/dist/Uploader.swf',
    server: '/upload/webupload',
    pick: '#thumb_filePicker',
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});

up_thumb.on( 'fileQueued', function( file ) {
    up_thumb.makeThumb( file, function( error, src ) {
        if ( error ) {
            return;
        }
        $("div#thumb_prev").append('<img src="'+src+'">');
    }, 200, 200 );
});
up_thumb.on('uploadSuccess',function( file, response ){
    $("input[name='thumb_img']").val(response.url);
} );


</script>
@endsection
